<template>
  <div id="PersonnelDesk" v-loading="loading">
    <div class="container">
      <el-row :gutter="10">
        <el-col class="right-col" :span="16">
          <div class="_section1 section4 m-bottom10 common-container">
            <div class="bar">
              <div class="bar-content">
                <span class="bar-icon"></span>
                <div class="bar-title">人事提醒（30天内）</div>
              </div>
            </div>
            <div class="box">
              <div class="item" v-for="(item, index) in warnList" :key="index" @click="$router.push(item.route)">
                <div class="text">
                  <img class="img" :src="item.icon" alt="" />
                  <div class="txt">{{ item.title }}</div>
                </div>
                <div class="num">
                  <span class="count">{{ warnObj[item.key] }}</span>人
                </div>
              </div>
            </div>
          </div>

        </el-col>
        <el-col :span="8" class="left-col">
          <div ref="section3" class="_section3 section2 common-container">
            <div class="bar">
              <div class="bar-content">
                <span class="bar-icon"></span>
                <div class="bar-title">日历</div>
              </div>
              <div class="bar-more">
                <div class="more-content">
                  <div class="more-icon"></div>
                  <div class="more-text"></div>
                </div>
              </div>
            </div>
            <div class="calendar">
              <el-calendar :first-day-of-week="7" v-model="value">
                <template slot="dateCell" slot-scope="{ data }">
                  <div class="calendar-content" @click="ontime(data)">
                    <div class="calendar-day" :class="{ 'bg-success': itemCreateTimeObj[data.day] && !itemCreateTimeObj[data.day].includes(0), 'bg-warn': itemCreateTimeObj[data.day] && itemCreateTimeObj[data.day].includes(0) }">
                      <span class="calendar-day-txt">{{ data.day.split("-").slice(2).join("-").split("")[0] === "0" ? data.day.split("-").slice(2).join("-").split("")[1] : data.day.split("-").slice(2).join("-").split("").join("") }}</span>
                      <div class="calendar-icon icon-success" v-if="itemCreateTimeObj[data.day] && !itemCreateTimeObj[data.day].includes(0)"></div>
                      <div class="calendar-icon icon-warn" v-if="itemCreateTimeObj[data.day] && itemCreateTimeObj[data.day].includes(0)"></div>
                    </div>
                  </div>
                </template>
              </el-calendar>
            </div>
            <div class="box" :style="{height: scrollHeight + 'px'}">
              <div class="item" v-for="(item, index) in list" :key="index" @click="$router.push(item.route)">
                <!-- <i class="iconfont" :class="item.icon" style="font-size:20px;    align-self: flex-start;" :style="{color: item.color}"></i> -->
                <img class="img" :src="item.icon" style="font-size: 20px; align-self: flex-start" alt="" />
                <div class="text">{{ item.value }}</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col class="right-col" :span="8">
          <div class="_section4 section4 common-container">
            <div class="bar">
              <div class="bar-content">
                <span class="bar-icon"></span>
                <div class="bar-title">人事概况（企业总人数{{ personAll }}人）</div>
              </div>
            </div>
            <div class="items">
              <div class="item" v-for="(item, index) in surveyList" :key="index">
                <div class="num">
                  <span class="txt">{{ item.number }}</span> 人
                </div>
                <div class="type">{{ item.employeeType }}</div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" class="left-col">
          <div class="_section5 section2 common-container">
            <div class="bar">
              <div class="bar-content">
                <span class="bar-icon"></span>
                <div class="bar-title">即将入职</div>
              </div>
            </div>
            <div class="items" @click="$router.push({name:'induction'})">
              <div class="item">
                <div class="num">
                  <span class="txt">{{ entryInfo.count }}</span>人
                </div>
                <div class="type">即将入职</div>
              </div>
            </div>
            <div v-if="!entryInfo.count" @click="$router.push({name:'induction'})" class="footer-default">查看入职记录></div>
            <div v-else class="footer-basic">
              <div class="avatar">
                <img v-if="entryInfo.data.headPortrait" class="img" :src="entryInfo.data.headPortrait" alt="" />
                <div v-else class="default">{{ entryInfo.data.name.slice(-2) }}</div>
              </div>
              <div class="info">
                <div class="info-basic">
                  <div class="name">{{ entryInfo.data.name }}</div>
                  <div class="time">{{ entryInfo.data.plannedHireDate.slice(0, 10) }}入职</div>
                </div>
                <div class="post">{{ entryInfo.data.departmentName }}/{{ entryInfo.data.subCompanyName }} {{ entryInfo.data.postname }}</div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" class="left-col">
          <div class="_section6 section2 common-container">
            <div class="bar">
              <div class="bar-content">
                <span class="bar-icon"></span>
                <div class="bar-title">即将离职</div>
              </div>
            </div>
            <div class="items" @click="$router.push({name:'departure'})">
              <div class="item">
                <div class="num">
                  <span class="txt">{{ leaveInfo.count }}</span>人
                </div>
                <div class="type">即将离职</div>
              </div>
            </div>
            <div v-if="!leaveInfo.count" @click="$router.push({name:'departure'})" class="footer-default">查看离职记录></div>
            <div v-else class="footer-basic">
              <div class="avatar">
                <img v-if="leaveInfo.data.headPortrait" class="img" :src="leaveInfo.data.headPortrait" alt="" />
                <div v-else class="default">{{ leaveInfo.data.name.slice(-2) }}</div>
              </div>
              <div class="info">
                <div class="info-basic">
                  <div class="name">{{ leaveInfo.data.name }}</div>
                  <div class="time">{{ leaveInfo.data.leaveDate.slice(0, 10) }}离职</div>
                </div>
                <div class="post">{{ leaveInfo.data.departmentName }}/{{ leaveInfo.data.subCompanyName }} {{ leaveInfo.data.postname }}</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { RSTX } from "../layout/config.js";
export default {
  name: "PersonnelDesk",
  data() {
    return {
      warnObj: {},
      warnList: RSTX,

      surveyList: [],
      personAll: 0,

      list: [],
      value: new Date(),
      itemCreateTimeObj: {},
      cruuentTime: "",
      entryInfo: {}, //入职
      leaveInfo: {},

      loading: true,
      scrollHeight: 0,
    };
  },
  watch: {
    cruuentTime: {
      async handler(newVal) {
        // const { data } = await this.$api.optionsManage.GetEmployeeBirthDayByTime({ date: newVal });
        const { data } = await this.$api.optionsManage.GetPersonnelWarnDetail({ date: newVal });
        let list = JSON.parse(JSON.stringify(this.warnList));
        list.map((i) => {
          if (!data.data[i.key].length) return;
          i.value = i.key == "birthdayWarn" ? data.data[i.key].map((i) => i.name + i.employeeAge + "岁").join("、") + "生日" : data.data[i.key].join("、") + i.title;
        });
        this.list = list.filter((i) => i.value);
        console.log(list);
      },
    },
  },

  methods: {
    async initData() {
      this.loading = true;
      const {
        data: { data: entryInfo },
      } = await this.$api.optionsManage.GetEntryList();
      const {
        data: { data: leaveInfo },
      } = await this.$api.optionsManage.GetLeaveList();
      const {
        data: { data: warnObj },
      } = await this.$api.optionsManage.GetPersonnelWarn();
      const {
        data: { data: survey },
      } = await this.$api.optionsManage.GetPersonnelGeneralSituation();
      const surveyList = [{ employeeType: "待入职", number: survey.awaitEntry }, { employeeType: "待离职", number: survey.awaitLeave }, { employeeType: "试用期", number: survey.awaitRegular }, { employeeType: "正式员工", number: survey.regular }, ...survey.employeeTypeItems];
      this.entryInfo = entryInfo, this.leaveInfo = leaveInfo, this.warnObj = warnObj, this.personAll = survey.personAll, this.surveyList = surveyList;
      this.loading = false;
    },
    ontime(data) {
      this.cruuentTime = data.day;
    },
    getNowDate(date) {
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      if (m < 10) m = "0" + m;
      if (d < 10) d = "0" + d;
      return y + "-" + m + "-" + d;
    },
  },
  mounted() {
    this.cruuentTime = this.getNowDate(this.value);
    this.$nextTick(() => {
      // 点击前一个月
      let prevBtn = document.querySelector(".el-calendar__button-group .el-button-group>button:nth-child(1)");
      prevBtn.addEventListener("click", () => {
        let d = this.value;
        this.cruuentTime = this.getNowDate(d);
      });
    });

    this.$nextTick(() => {
      // 点击前一个月
      let prevBtn = document.querySelector(".el-calendar__button-group .el-button-group>button:nth-child(2)");
      prevBtn.addEventListener("click", () => {
        let d = this.value;
        this.cruuentTime = this.getNowDate(d);
      });
    });

    this.$nextTick(() => {
      // 点击后一个月
      let prevBtn = document.querySelector(".el-calendar__button-group .el-button-group>button:last-child");
      prevBtn.addEventListener("click", () => {
        let d = this.value;
        this.cruuentTime = this.getNowDate(d);
      });
    });
    this.$nextTick(() => {
      const { height } = this.$refs.section3.getBoundingClientRect();
      this.scrollHeight = height - 30 - 32 - 221;
    });
  },
  activated() {
    this.initData();
  },
};
</script>

<style lang="less" scoped>
@import "./index.less";
.container {
  display: flex;
  flex-direction: column;
}
._section1 {
  .box {
    // height: calc(100% - 50px);
    overflow: auto;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    .item {
      cursor: pointer;
      width: 23%;
      height: 12vh;
      margin-bottom: 20px;
      margin: 2% 1%;
      // border: 1px solid #ccc;
      background: #f7f8fc;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      // align-items: center;
      // justify-content: space-between;
      padding: 20px 20px;
      font-size: 18px;
      vertical-align: bottom;
      vertical-align: text-bottom;
      // min-width: 200px;
      &:hover {
        transition: 0.2s all;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      }
      .text {
        font-size: 12px;
        display: flex;
        align-items: center;
        // flex-direction: column;
        .txt {
          // white-space: nowrap;
          // text-align: left;
        }
        .img {
          width: 20px;
          height: 20px;
          font-size: 20px;
          // margin-bottom: 3px;
          margin-right: 8px;
        }
      }
      .num {
        white-space: nowrap;
        text-align: center;
        .count {
          // font-weight: 900;
          font-size: 28px;
        }
        height: 6.5vh;
        line-height: 6.5vh;
      }
    }
  }
}
._section2 {
  .box {
    overflow: auto;
    margin: auto;
    width: 96%;
    margin-top: 20px;
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      .txt {
        white-space: nowrap;
        font-size: 12px;
        color: #6c6c6c;
      }
      .txt-h {
        width: 100px;
        text-align: left;
      }
      .txt-f {
        width: 50px;
        text-align: right;
      }
    }
  }
}
._section3 {
  margin-bottom: 10px;
  .box {
    overflow: auto;
    font-size: 20px;
    .item {
      display: flex;
      align-items: center;
      margin-top: 10px;
      cursor: pointer;
      img {
        width: 20px;
        height: 20px;
        border-radius: 50%;
      }
      .default {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        line-height: 20px;
        background: #75adfb;
        text-align: center;
      }
      .text {
        font-size: 12px;
        margin-left: 13px;
      }
    }
  }
}
:deep( .el-progress) {
  width: 100%;
}
._section4 {
  .items {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    margin: auto;
    @media screen and (min-width: 0px) and (max-width: 1400px) {
      .item {
      width: 33.3333%;
      text-align: center;
      padding: 10px;
      .txt {
        font-size: 24px;
      }
      .num {
        min-width: 64px;
      }
      .type {
        min-width: 64px;
      }
    }
    }
    @media screen and (min-width: 1401px){
      .item {
      width: 33.3333%;
      text-align: center;
      padding: 30px;
      .txt {
        font-size: 30px;
      }
      .num {
        min-width: 64px;
      }
      .type {
        min-width: 64px;
      }
    }
    }
     
  }
}

._section5 {
  display: flex;
  flex-direction: column;
  height: 100%;
  .items {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    .item {
      text-align: center;
      .txt {
        font-size: 30px;
      }
    }
  }
  .footer {
    border-top: 1px solid #edeef2;
    padding-top: 15px;
    text-align: center;
    cursor: pointer;
    color: #313131;
  }
}

._section6 {
  display: flex;
  flex-direction: column;
  height: 100%;
  .items {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    .item {
      text-align: center;
      .txt {
        font-size: 30px;
      }
    }
  }
}
.footer-default {
  border-top: 1px solid #edeef2;
  padding-top: 15px;
  text-align: center;
  cursor: pointer;
  color: #313131;
}
.footer-basic {
  border-top: 1px solid #edeef2;
  padding-top: 15px;
  // cursor: pointer;
  color: #313131;
  display: flex;
  align-items: center;
  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
    .img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    .default {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: #608fe6;
      text-align: center;
      line-height: 50px;
      color: #fff;
    }
  }
  .info {
    flex: 1;
    font-size: 14px;
    .info-basic {
      display: flex;
      justify-content: space-between;
      .time {
        // color: #ccc;
      }
    }
    .post {
      // color: #ccc;
    }
  }
}
</style>
